<template>
  <div>
    <el-steps style="max-width: 600px;margin: 0 auto;background:transparent;" :active="active" :space="200" align-center finish-status="success">
      <el-step title="基本信息" :icon="Document" />
      <el-step title="计划上传" :icon="UploadFilled" />
    </el-steps>
    <div class="step_content">
      <el-form :model="form" :inline="true" ref="studyForm" label-position="left" :rules="rules" label-width="150px">
        <div v-show="active===0">
          <div class="step_title">数据资源</div>
          <el-form-item label="资源类型" prop="resourceType">
            <el-select v-model="form.resourceType" placeholder="请选择资源类型" clearable>
              <el-option v-for="dict in resource_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资源名称" prop="resourceName">
            <el-input v-model="form.resourceName" placeholder="请输入资源名称" clearable />
          </el-form-item>
          <el-form-item label="开放等级" prop="openLevel">
            <el-select v-model="form.openLevel" placeholder="请选择开放等级" clearable>
              <el-option v-for="dict in open_level" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全级别" prop="securityLevel">
            <el-select v-model="form.securityLevel" placeholder="请选择安全级别" clearable>
              <el-option v-for="dict in security_level" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据资源简介" prop="resourceIntroduction" style="width:calc(100% - 32px);">
            <el-input v-model="form.resourceIntroduction" placeholder="请输入" clearable type="textarea" maxlength="200" show-word-limit :autosize="{ minRows: 2, maxRows: 4 }" />
          </el-form-item>
          <div class="step_title">数据源</div>
          <el-form-item label="" label-width="0" prop="itemDiscussDataSourcePraam" style="width:calc(100% - 32px);">

            <el-table :data="form.itemDiscussDataSourcePraam" style="width: 100%;" cell-class-name="table_row">
              <el-table-column prop="sourceName" label="数据源名称" width="180">
                <template #default="scope">
                  <el-input v-model="scope.row.sourceName" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="sourceGetType" label="取得方式" min-width="200">
                <template #default="scope">
                  <el-select style="margin-bottom:10px;" v-model="scope.row.sourceGetType" placeholder="请选择">
                    <el-option v-for="dict in source_get_type" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                  </el-select>
                  <FileUpload :isShowTip="false" :needDetail="true" :fileType="[]" v-model="scope.row.fileArrayType">
                    <template #content>
                      <el-button type="success" icon="upload">上传凭证</el-button>
                    </template>
                  </FileUpload>
                </template>
              </el-table-column>
              <el-table-column prop="isSave" label="是否存证" min-width="200">
                <template #default="scope">
                  <el-switch style="margin-bottom:10px;" v-model="scope.row.isSave" inline-prompt :active-value="1" :inactive-value="2" active-text="是" inactive-text="否" />
                  <FileUpload :isShowTip="false" :needDetail="true" :fileType="[]" v-model="scope.row.fileArraySave">
                    <template #content>
                      <el-button type="success" :disabled="!scope.row.isSave" icon="upload">上传凭证</el-button>
                    </template>
                  </FileUpload>
                </template>
              </el-table-column>
              <el-table-column prop="introduce" label="数据源简介" width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.introduce" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="directions" label="权属说明" width="120">
                <template #default="scope">
                  <el-input v-model="scope.row.directions" placeholder="请输入"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" prop="directions" label="操作" width="80">
                <template #default="scope">
                  <el-button type="primary" text @click="handleDelete(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align:center;width:100%;">
              <el-button type="primary" text @click="handleAdd">添加</el-button>
            </div>
          </el-form-item>
        </div>
        <div v-show="active===1">
          <div class="step_title">使用说明</div>
          <el-form-item label="提供方式" prop="projectType" style="width:calc(100% - 32px);">
            <el-radio-group v-model="form.projectType">
              <el-radio :label="1">数据集</el-radio>
              <el-radio :label="2">数据报告</el-radio>
              <el-radio :label="3">数据接口</el-radio>
              <el-radio :label="4">其他产品</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="step_title">资料上传</div>
          <el-form-item label="" label-width="0" prop="fileArray" style="width:calc(100% - 32px);">
            <el-alert show-icon :title="tips[0]" type="warning" :closable="false" style="margin-bottom: 10px;" />
            <FileUpload :limit="1" :fileSize="10" :fileType="['pdf']" :isShowTip="false" v-model="form.fileArray" :drag="true">
              <template #content>
                <el-icon class="el-icon--upload">
                  <upload-filled />
                </el-icon>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </template>
            </FileUpload>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="step_footer">
      <el-button @click="cancle">取消</el-button>
      <el-button type="primary" @click="handleStorage">暂存</el-button>
      <el-button v-if="active>0" @click="pre">上一步</el-button>
      <el-button v-if="active!==1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="active===1" type="primary" @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script setup name="Study">
import { UploadFilled, Document } from '@element-plus/icons-vue'
import { onMounted } from 'vue';
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const active = ref(0)
const studyForm = ref()
const { resource_usage, resource_type, open_level, security_level, source_get_type, is_save } = proxy.useDict(
  "resource_usage",
  "resource_type",
  "open_level",
  "security_level",
  "source_get_type",
  "is_save"
);
const tips = [
  '请上传所需资料包括但不限于采购计划书、采购审批单、经济可行性分析报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书',
  '请上传所需资料包括但不限于立项报告、立项审批单、经济可行性分析报告、项目预算报告、组织架构说明书'
]
const testTableData = (rule, value, callback) => {
  const arr = value
  for (const item of arr) {
    for (const i of Object.keys(item)) {
      if (!item[i] || item.isSave + '' === '1' && item.fileArraySave.length === 0 || item.fileArrayType.length === 0) {
        callback(new Error("请确认数据源"));
        return
      }
    }
  }
  callback()
}
const form = ref({
  itemId: '',
  resourceType: '',
  resourceName: '',
  openLevel: '',
  securityLevel: '',
  resourceIntroduction: '',
  isStorage: 2,
  itemDiscussDataSourcePraam: [],
  projectType: '',
  fileArray: '',
})
const rules = ref({
  resourceType: [{ required: true, message: "请选择资源类型", trigger: "change" }],
  resourceName: [{ required: true, message: "请选择资源名称", trigger: "change" }],
  openLevel: [{ required: true, message: "请选择开放等级", trigger: "change" }],
  securityLevel: [{ required: true, message: "请输入安全级别", trigger: "change" }],
  resourceIntroduction: [{ required: true, message: "请输入数据资源简介", trigger: "blur" }],
  itemDiscussDataSourcePraam: [
    { required: true, message: "请添加数据源", trigger: "blur" },
    { required: true, validator: testTableData, trigger: "blur" }
  ],
  projectType: [{ required: true, message: "请选择提供方式", trigger: "blur" }],
  fileArray: [{ required: true, message: "请上传文件", trigger: "change" }],
})
const pre = () => {
  active.value--
}
const next = () => {
  // active.value++
  if (active.value === 0) {
    proxy.$refs["studyForm"].validate(valid => {
      if (valid) {
        active.value++
      }
    })
  }
}
const handleStorage = () => {
  form.value.isStorage = 1

}
const submit = () => {

}
const cancle = () => {
  router.go(-1)
}
const handleDelete = (index) => {
  form.value.itemDiscussDataSourcePraam.splice(index, 1)
}
const handleAdd = () => {
  form.value.itemDiscussDataSourcePraam.push({
    sourceName: '',
    sourceGetType: '',
    isSave: '2',
    introduce: '',
    directions: '',
    fileArrayType: [],
    fileArraySave: [],
  })
  console.log(form.value.itemDiscussDataSourcePraam, 'form.value.itemDiscussDataSourcePraam')
}
onMounted(() => {
  const type = route.query.type
})
</script>

<style lang="scss" scoped>
.step_content {
  height: calc(100vh - 180px);
  overflow: auto;
  padding: 20px 60px;
}
.step_title {
  line-height: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 10px;
  margin: 20px 0 20px;
  &::before {
    position: absolute;
    left: 0;
    height: 20px;
    width: 4px;
    background-color: #3970e3;
    content: "";
  }
}
.step_upload {
  margin-top: 10px;
}
.step_footer {
  text-align: center;
}
:deep(.el-form--inline .el-form-item) {
  width: calc(50% - 32px);
}
// :deep(.table_row) {
//   flex-shrink: 0;
// }
// :deep(.el-table tr) {
//   display: flex;
// }
</style>